<template>
	<div id="app">
		<div id="set_data">
			<div class="fill_word">
				<ul>
					<li>
						<p>用户</p>
						<div class="am-form-group">
							<input type="text/css" name="input" v-model="fd.name" placeholder="请输入用户名" />
						</div>
						<div class="clear"></div>
					</li>
					<li>
						<p>邮箱</p>
						<div class="am-form-group">
							<input type="text/css" name="input" v-model="fd.email" placeholder="请输入邮箱" />
						</div>
						<div class="clear"></div>
					</li>
					<li>
						<p>手机</p>
						<div class="am-form-group">
							<input type="text/css" name="input" v-model="fd.phone" placeholder="请输入手机号" />
						</div>
						<div class="clear"></div>
					</li>
					<li>
						<!-- <p>密保问题</p> -->
						      <view class="uni-list" style="width: 100%;">
						           <view class="uni-list-cell">
						               <view class="uni-list-cell-db">
						                   <picker @change="bindPickerChange" :value="fd.problem" :range="questions">
						                       <view class="uni-input">{{questions[fd.problem]}}</view>
						                   </picker>
						               </view>
						          </view>
						       </view>
					</li>
					<li>
						<p>密保</p>
						<div class="am-form-group">
							
							<input type="text/css" name="input" v-model="fd.answer" placeholder="请验证密保问题答案" />
						</div>
						<div class="clear"></div>
					</li>
				</ul>
				<input type="submit" class="yes" value="确定" @click="submit()"
					style="background-color: #61ac85;border: 1px solid #579572;"> </input>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				questions:[
					'点击验证择密保问题',
					'您的姓名是？',
					'您配偶的生日是？',
					'您的学号（或工号）是？',
					'您母亲的生日是？',
					'您高中班主任的名字是？',
					'您父亲的姓名是？',
					'您小学班主任的名字是？',
					'您父亲的生日是？',,
					'您配偶的姓名是？',
					'您初中班主任的名字是？',
					'您初中班主任的名字是？',
					'您最熟悉的童年好友名字是？'
				],
				usr: '',
				pwd: '',
				fd: {
					name: "",
					pwd: "",
					phone: "",
					answer: "",
					email: "",
					problem:0,
				}
			}
		},
		methods: {
			bindPickerChange:function(e){
				this.fd.problem = e.detail.value;
			},
			submit: function() {
				if (!this.validEmail(this.fd.email)) {
					uni.showToast({
						title: '警告,邮箱格式错误！',
						duration: 2000,
						icon: 'error',
					});
					return false;
				}

				uni.request({
					url: `${config.baseUrl}/forget`,
					method: 'POST',
					data: this.fd,
					success(r) {
						if (r.data.succ) {
							uni.navigateTo({
								url: "./password?name=" + r.data.data
							})
						}
					},
					complete(res){
						if(res.data && res.data.msg){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					},
				})
			},
			validEmail(email) { //前端注册，email检验
				var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				var result = email.match(pattern);
				return result != null; //TODO 
			},
		}
	}
</script>

<style>
</style>
